<template>
  <div class="swiper-container" :class="swipeid">
    <div class="swiper-wrapper">
      <!-- 轮播图接口 -->
      <slot name="swiper-con"></slot>
    </div>
    <div :class="{'swiper-pagination':pagination}"></div>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
  props: {
    swipeid: {
      type: String,
      default: ""
    },
    effect: {
      type: String,
      default: "slide"
    },
    loop: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    pagination: {
      type: Boolean,
      default: true
    },
    paginationType: {
      type: String,
      default: "bullets"
    },
    autoPlay: {
      type: Number,
      default: 3000
    }
  },
  data() {
    return {
      dom:""
    }
  },
  mounted() {
    var that = this;
    this.dom = new Swiper(".swiper-container", {
      autoplay: {
        delay: 3000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
      },
      effect: that.effect,
      autoPlay: that.autoPlay,
      direction: that.direction,
      loop: that.loop,
      paginationType: that.paginationType,
      pagination: {
        el: ".swiper-pagination",
      },
      observer: true,
      observeParents: true
    });
  },
};
</script>
<style lang="scss" scoped>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-container {
  --swiper-theme-color: #c1c3cb;
  --swiper-pagination-color: #acadbb; /* 两种都可以 */
}
.main {
  width: 100%;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>

